import { CSSRuleObject, styled } from "styledfc";
import img from "../img";
import { FlexCss, PositionCss, TextOverFlowCss } from "../../../utils/styledfc";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toggleCollectFunc } from "@/utils/commonFunc";
import { useScrollBottom } from "@/hooks/useScrollBottom.ts";
export interface PetCardType {
    englishName: string;
    life: string;
    name: string;
    img: string;
    collect: boolean;
    id: number;
}
import { useSelector } from "react-redux";
import { getCollectLog, getDataByType } from "@/api";
export default function HotList() {
    const navigate = useNavigate();
    const [hotList, setHotList] = useState<PetCardType[]>([]);
    const uid = !!localStorage.getItem("pet-userInfo") ? JSON.parse(localStorage.getItem("pet-userInfo") as string).id : -1;
    const changeCollect = async (item: PetCardType, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        e.stopPropagation();
        toggleCollectFunc(uid, item.id, setHotList, hotList);
    };
    const pathTo = (item: PetCardType) => {
        navigate(`/details/${item.id}`);
    };
    const [bool] = useScrollBottom();
    const [page, setPage] = useState(1);
    useEffect(() => {
        if (bool) {
            getDataByType(type, page + 1, 7).then((res) => {
                const { data } = res as { data: any };
                const arr = data.map((item: { [key in string]: any }): PetCardType => {
                    return {
                        englishName: item.pet_engName,
                        life: item.pet_life,
                        name: item.pet_name,
                        img: item.pet_coverURL,
                        collect: colIds.includes(item.id) ? true : false,
                        id: item.id,
                    };
                });
                setHotList((prev) => [...prev, ...arr]);
                setPage(page + 1);
            });
        }
    }, [bool]);
    const { type } = useSelector((state: any) => state.petType);
    const [colIds, setColIds] = useState<number[]>([]);
    useEffect(() => {
        const resetData = async () => {
            setPage(1);
            setHotList([]);
            const [{ data: colRes }, { data: dataRes }] = (await Promise.all([getCollectLog(uid), getDataByType(type, 1, 7)])) as { data: any }[];
            setColIds(colRes.map((item: { [key in string]: any }) => item.id));
            setHotList(
                dataRes.map((item: { [key in string]: any }): PetCardType => {
                    return {
                        englishName: item.pet_engName,
                        life: item.pet_life,
                        name: item.pet_name,
                        img: item.pet_coverURL,
                        collect: colIds.includes(item.id) ? true : false,
                        id: item.id,
                    };
                })
            );
        };
        resetData();
    }, [type]);
    return (
        <div className={hotListStyle.className}>
            <div className="hot__list-title">hot animal</div>
            <div className="hot__list-container">
                {hotList.map((item) => (
                    <div className="hot__item" key={item.id} data-id={item.id} onClick={() => pathTo(item)}>
                        <div className="hot__item-img">
                            <img src={item.img} />
                        </div>
                        <div className="hot__item-desc">
                            <div className="desc__tit">{item.englishName ?? "暂无数据"}</div>
                            <div className="desc__bot">{item.name ?? "暂无数据"}</div>
                            <div className="desc__bot">{item.life ?? "暂无数据"}</div>
                            <div className={`hot__item-collect ${item.collect && "active"}`} onClick={(e) => changeCollect(item, e)}>
                                <img src={img.collect} />
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}
const hotListStyle = styled({
    margin: "20rem 20rem 0",
    fontSize: "20rem",
    ".hot__list-title": {
        color: "#5c6542",
    },

    ".hot__list-container": {
        paddingBottom: "20rem",
        ...(FlexCss("auto", "space-between") as CSSRuleObject),
        flexWrap: "wrap",
        ".hot__item:nth-child(even)": {
            transform: "translateY(20rem)",
        },
        ".hot__item": {
            width: "162rem",
            height: "229rem",
            borderRadius: "28rem",
            backgroundColor: "white",
            marginTop: "20rem",
            ...(FlexCss("center", "space-between", "column") as CSSRuleObject),
            ".hot__item-img": {
                width: "152rem",
                height: "152rem",
                marginTop: "5rem",
                borderRadius: "26rem",
                overflow: "hidden",
                ">img": {
                    height: "100%",
                    width: "100%",
                    objectFit: "cover",
                },
            },
            ".hot__item-desc": {
                marginLeft: "4rem",
                height: "60rem",
                width: "142rem",
                borderRadius: "26rem",
                marginBottom: "5rem",
                position: "relative",

                ".hot__item-collect": {
                    ...(PositionCss("absolute", { bottom: "10rem", right: "4rem" }) as CSSRuleObject),
                    width: "21rem",
                    height: "21rem",
                    backgroundColor: "#ECEBEB",
                    borderRadius: "50%",
                    ...(FlexCss("center", "center") as CSSRuleObject),
                    ":where(.active)": {
                        backgroundColor: "#ffd967",
                        boxShadow: "0 2rem 6rem #ffd967",
                    },
                    ">img": {
                        height: "12rem",
                        width: "12rem",
                    },
                },

                ".desc__tit": {
                    marginTop: "2rem",
                    fontSize: "14rem",
                    color: "#333",
                    ...TextOverFlowCss(1),
                },
                ".desc__bot:last-child": {
                    marginTop: "0rem",
                },
                ".desc__bot": {
                    marginTop: "4rem",
                    fontSize: "12rem",
                    color: "gray",
                },
            },
        },
    },
});
